A pseudo-element in CSS is used to style a specific part of an element or insert content before or after it. The standard syntax uses double colons :: followed by the pseudo-element name.

Key Points

1
Syntax format: selector::pseudo-element { properties }
2
Common pseudo-elements include ::before, ::after, ::first-letter, and ::first-line.
3
Single colon : notation (e.g., :before) is also supported for backward compatibility with older browsers.
4
Pseudo-elements do not exist in the DOM; they are virtual elements used for styling purposes.

Example: Using ::before and ::first-letter

In this example, ::first-letter targets and styles the first letter of the paragraph, while ::before inserts a star before the paragraph text.

Best Practices

1
Use pseudo-elements to style or decorate content without modifying the HTML structure.
2
Combine with CSS properties like content, color, font-size, and background.
3
Prefer double colon :: notation for clarity and modern standards.
4
Test pseudo-elements across browsers to ensure consistent rendering.

Difficulty: 3/10

Topics: pseudo-element syntax, CSS selector specificity, before/after usage

Scenario Questions

0-2 years experience

1
How would you add a small star icon after every .review-rating element using CSS pseudo-elements?
2
What happens if you write :before instead of ::before in modern CSS — will it still work?
3
You’re trying to style a ::after element on a button, but nothing shows up. What’s the first thing you check?

2-5 years experience

1
A designer wants a speech bubble tooltip using ::before and ::after, but the triangle part is misaligned on mobile — how do you debug and fix it?
2
We’re using ::before to add decorative icons in a list, but now the screen reader is announcing them. How do you fix accessibility without removing the visual effect?
3
Our CSS file has a ::before rule that’s being overridden by another rule — how do you trace the specificity conflict without breaking other styles?

5-8 years experience

1
You’re building a reusable card component that uses ::before for a border accent, but it breaks when the card is used inside a scrollable container with overflow hidden — how do you redesign this without losing the visual effect?
2
In a high-traffic component library, we’re using pseudo-elements for icons to avoid extra DOM nodes. What performance or rendering tradeoffs should you consider at scale?
3
A legacy UI uses ::after to inject text labels dynamically — now we’re migrating to a React component system. How do you decide whether to keep the pseudo-element or move it to JSX?

8+ years experience

1
We’re standardizing a design system across 12 teams, and some are using pseudo-elements for critical UI cues while others use real elements — how do you enforce consistency without breaking accessibility or performance?
2
A legacy product relies heavily on ::before and ::after for layout and spacing. We want to migrate to CSS Grid, but removing these breaks dozens of pages. What’s your migration strategy?
3
How would you architect a CSS architecture that minimizes reliance on pseudo-elements for semantic content while still allowing designers to use them for decoration — and how do you communicate that boundary across engineering and design teams?

Follow-up Questions

❓What happens if you forget the content property?
❓How would you debug a ::before element that’s not showing up?
❓Can you use pseudo-elements on self-closing tags like <img>?